<div class="layui-fluid" id="VIEW-DIRECTORY" lay-title="数据字典管理管理">

    <!-- 新增字典类型 -->
    <div class="layui-card" id="dictKey_add" style="display: none">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" id="dictKey_add " lay-filter="dictKey_add">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典名称:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictName" placeholder="字典名称" onkeyup="this.value=this.value.replace(/\s+/g,'')" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典编码:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictCode" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="字典编码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline" style="width:100%">
                        <label class="layui-form-label"><span class="xing">*</span>系统字典:</label>
                        <div class="layui-input-inline">
                            <div class="layui-col-md6" style="width: 100%">
                                <select name="isSys" >
                                    <option >-请选择-</option>
                                    <option value=false>否</option>
                                    <option value=true>是</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">字典描述:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictDesc" onkeyup="this.value=this.value.replace(/\s+/g,'')"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-dict-key-submit">保存</button>
                        <button type="reset" id="reset_dict_key_add" class="layui-btn layui-btn-primary">清除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 修改字典类型 -->
    <div class="layui-card" id="dictKey_edit" style="display: none">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="dictName_edit" name="dictName" placeholder="字典名称" onkeyup="this.value=this.value.replace(/\s+/g,'')" lay-verify="required" autocomplete="off" class="layui-input">
                            <input type="hidden" id = "hidId" name="hidId" />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典编码:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="dictCode_edit" name="dictCode" readonly style="cursor: not-allowed "  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline" style="width:100%">
                        <label class="layui-form-label"><span class="xing">*</span>系统字典:</label>
                        <div class="layui-input-inline">
                            <div class="layui-col-md6" style="width: 100%">
                                <select name="isSys" id="isSys_edit">
                                    <option >-请选择-</option>
                                    <option value=false>否</option>
                                    <option value=true>是</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">字典描述:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="dictDesc_edit" name="dictDesc" onkeyup="this.value=this.value.replace(/\s+/g,'')"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-dict-key-edit">确认修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 新增字典值 -->
    <div class="layui-card" id="dictValue_add" style="display: none">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" id="dictValue_add " lay-filter="dictValue_add">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典值描述:</label>
                        <div class="layui-input-inline">
                            <input type="hidden" id="hidDictCode" name="dictCode" />
                            <input type="hidden" id="hidIsSys" name="isSys" />
                            <input type="text"  name="dictItemText" placeholder="字典值描述" onkeyup="this.value=this.value.replace(/\s+/g,'')" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典值:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemValue" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="字典值" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline" style="width:100%">
                        <label class="layui-form-label"><span class="xing">*</span>排序:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemSort" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="排序" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">描述:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemDesc" onkeyup="this.value=this.value.replace(/\s+/g,'')"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-dict-value-submit">保存</button>
                        <button type="reset" id="reset_dict_value_add" class="layui-btn layui-btn-primary">清除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 修改字典值 -->
    <div class="layui-card" id="dictValue_edit" style="display: none">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" id="dictValue_edit " lay-filter="dictValue_edit">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典值描述:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemText" id="dictItemText" placeholder="字典值描述" onkeyup="this.value=this.value.replace(/\s+/g,'')" lay-verify="required" autocomplete="off" class="layui-input">
                            <input type="hidden" id = "hidValueId" name="hidValueId" />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>字典值:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemValue" id="dictItemValue" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="字典值" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline" style="width:100%">
                        <label class="layui-form-label"><span class="xing">*</span>排序:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemSort" id="dictItemSort" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="排序" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">描述:</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="dictItemDesc" id="dictItemDesc" onkeyup="this.value=this.value.replace(/\s+/g,'')"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-dict-value-edit">保存</button>
                        <button type="reset" id="reset_dict_value_edit" class="layui-btn layui-btn-primary">清除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 字典值弹窗 -->
    <div class="layui-card" id="dictValueList" style="display: none">
        <table id="dict-value-table" class="layui-hide" lay-filter="dict-value-table"></table>
    </div>


    <!-- 表头条件搜索 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <i class="layui-icon layui-icon-cluster"></i>&nbsp;数据字典管理
        </div>
        <div class="layui-row">
            <div class="layui-card-body">
                <div class="layui-form" id="dictReload">
                    <div class="layui-input-inline">
                        <input type="text" name="dictName" id="dictName" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                               placeholder="字典名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="dictCode" id="dictCode" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                               placeholder="字典编码" autocomplete="off" class="layui-input">
                    </div>
                    <button id="search" class="layui-btn" style="margin-left: 20px;" lay-submit
                            lay-filter="provinceSearch" data-type="reload">
                        <i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>
                <table id="dict-table" class="layui-hide" lay-filter="dict-table"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="dictTool_bar">
        <button class="layui-btn layui-btn-sm" style="background-color: #00d57b;font-size:14px;" lay-event="createDictKey">新增字典类型</button>
        <button class="layui-btn layui-btn-sm" lay-event="editDictKey">字典类型信息修改</button>
    </script>
    <script type="text/html" id="dictValueTopbar">
        <a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="dict_value_add"><i class="layui-icon">&#xe654;</i>新增</a>
    </script>

    <script type="text/html" id="dictValueBar">

        <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="dict_value_edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        {{# if (!d.isSys) { }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dict_value_del"><i class="layui-icon">&#xe640;</i>删除</a>
        {{# } }}
    </script>

</div>
<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'jquery','laydate'],
        function (admin, table, form, dropdown, $) {
        var view = $('#VIEW-DIRECTORY');
        var laydate = layui.laydate,
            form = layui.form,
            admin = layui.admin,
            selectM=layui.selectM,
            index;

        form.render();

        var dictValueTable =  table.render({
            elem: '#dict-value-table'
            ,api: 'getAllDictValue' //数据接口
            ,limit: 5
            ,limits:[5,10,15]
            ,width: 1000
            ,title: '数据字典值'
            ,page: true //开启分页
            ,even: true //开启隔行背景
            ,toolbar:'#dictValueTopbar'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            ,cols: [[ //表头
                { title: '', type: 'checkbox', fixed: true, width: 70 },
                { title: '字典值序号',align:'center',field: 'id',width: 100 },
                { title: '字典编码', align:'center',field: 'dictCode', width: 120},
                { title: '字典值', align:'center',field: 'dictItemValue', width: 90},
                { title: '顺序', align:'center',field: 'dictItemSort', width: 80},
                { title: '字典值描述', align:'center',field: 'dictItemText', width: 160},

                { title:'描述', align:'center',field: 'dictItemDesc', width: 150},
                { title:'操作', fixed: 'right',align:'center', width: 220, toolbar: '#dictValueBar'}
            ]]
        });
            //监听数据字典值表格工具条
            table.on('tool(dict-value-table)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === "dict_value_edit") {
                    index = layer.open({
                        type: 1
                        ,anim: 5
                        ,shade: 0
                        ,maxmin: false
                        ,area:['400px','362px']
                        ,title:'数据字典值'
                        ,content: $('#dictValue_edit')
                    });
                    $('#dictItemText').val(data.dictItemText);
                    $('#dictItemValue').val(data.dictItemValue);
                    $('#dictItemSort').val(data.dictItemSort);
                    $('#dictItemDesc').val(data.dictItemDesc);
                    $('#hidValueId').val(data.id);
                }
                else if (layEvent === "dict_value_del") {
                    layer.confirm('是否对字典值--'+data.dictItemValue+"--"+data.dictItemText+'--进行删除？', {
                        btn: ['确认','取消'] //按钮
                    }, function(){
                        admin.delete({
                            api: "delDictValue",
                            data: {
                                id:data.id
                            },
                            success: function(res) {
                                layer.msg(res.data);
                                table.reload('dict-value-table', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                        });
                    });
                }
            });
            //数据字典值表格头工具栏事件
            table.on('toolbar(dict-value-table)', function(obj){
                //新增数据字典类型
                if(obj.event === 'dict_value_add'){
                    index = layer.open({
                        type: 1
                        ,anim: 5
                        ,shade: 0
                        ,maxmin: false
                        ,area:['400px','362px']
                        ,title:'新增字典值数据'
                        ,content: $('#dictValue_add')
                    });
                }
            });


            /* 监听修改数据字典值提交 */
            form.on('submit(form-dict-value-edit)', function (data) {
                admin.put({
                    api: "updateDictValue",
                    data:{
                        "dictItemText" : data.field.dictItemText,
                        "dictItemValue" : data.field.dictItemValue,
                        "dictItemSort" : data.field.dictItemSort,
                        "dictItemDesc" : data.field.dictItemDesc,
                        "id":$('#hidValueId').val(),
                    },
                    //请求成功
                    success:function(res){
                        layer.close(index);
                        layer.msg(res.data);
                        table.reload('dict-value-table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
                return false;
            });

            /* 监听新增数据字典值提交 */
            form.on('submit(form-dict-value-submit)', function (data) {
                admin.post({
                    api: "createDictValue",
                    data:data.field,
                    //请求成功
                    success:function(res){
                        layui.form.render();
                        layer.close(index);
                        $("#reset_dict_value_add").click();
                        layer.msg(res.data);
                        table.reload('dict-value-table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
                return false;
            });


        /* 监听修改数据字典提交 */
        form.on('submit(form-dict-key-edit)', function (data) {
            if(data.field.isSys==="-请选择-"){
                layer.msg("请选择是否系统字典！");
                return false;
            }
            admin.put({
                api: "updateDictKey",
                data:{
                    "dictCode" : data.field.dictCode,
                    "id" : data.field.hidId,
                    "dictName" : data.field.dictName,
                    "dictDesc" : data.field.dictDesc,
                    "isSys":data.field.isSys,
                },
                //请求成功
                success:function(res){
                    layer.close(index);
                    layer.msg(res.data);
                    table.reload('dict-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
            return false;
        });

        /* 监听新增数据字典提交 */
        form.on('submit(form-dict-key-submit)', function (data) {
            if(data.field.isSys==="-请选择-"){
                layer.msg("请选择是否为系统字典！");
                return false;
            }
            admin.post({
                api: "createDictKey",
                data:data.field,
                //请求成功
                success:function(res){
                    layui.form.render();
                    layer.close(index);
                    $("#reset_dict_key_add").click();
                    layer.msg(res.data);
                    table.reload('dict-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
            return false;
        });

        /*数据字典类型数据表*/
       var dictKeyTable =  table.render({
            elem: '#dict-table'
            ,height: 'full-165'
            ,api: 'getAllDictKey' //数据接口
            ,title: '数据字典'
            ,page: true //开启分页
            ,even: true //开启隔行背景
            ,toolbar:'#dictTool_bar'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            ,cols: [[ //表头
                { title: '', type: 'checkbox', fixed: true, width: 60 },
                { title: '字典序号',field: 'id',width: 80 },
                { title: '字典名称',field: 'dictName', width: 150 ,},
                { title: '字典编码', field: 'dictCode', width: 290},
                { title: '是否系统字典', field: 'isSys', width: 110,templet: function(d){
                        if(d.isSys){
                            return "是";
                        }else{
                            return  "否";
                        }
                    }},
                { title: '字典描述', field: 'dictDesc', width: 225},
                        { title: '创建人',field: 'createName', width: 100 },
                        { title: '创建时间', field: 'createTime', width: 150 ,templet: function(d){
                            if(d.createTime!=null){
                                return (d.createTime).replace("T"," ");
                            }else{
                                return "";
                            }
                        },},
                        { title: '修改人', field: 'updateName', width: 100 },
                        { title: '修改时间', field: 'updateTime', minWidth: 150 ,templet: function(d){
                            if(d.updateTime!=null){
                        return (d.updateTime).replace("T"," ");
                    }else{
                        return "";
                    }
                    },},
                {templet: complain, title: '操作'}
            ]]
        });

        var $ = layui.$, active = {
            reload: function(){

                var queryData = {
                    dictName: $('#dictName').val() || null,
                    dictCode: $('#dictCode').val() || null
                };
                var queryTemp = {};
                Object.keys(queryData).forEach(function(val, index) {
                    if (queryData[val] != null) queryTemp[val] = queryData[val];
                });
                //执行重载
                dictKeyTable.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: queryTemp
                });
            }
        };
        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function complain(d){//操作中显示的内容
            if(!d.isSys){
                return [
                    '<a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="dict_detail"><i class="layui-icon">&#xe63c;</i>详情</a>',
                    '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dict_del"><i class="layui-icon">&#xe642;</i>级联删除</a>',
                ].join('');
            }else{
                return [
                    '<a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="dict_detail"><i class="layui-icon">&#xe63c;</i>详情</a>',
                ].join('');
            }

        }


        //监听工具条
        table.on('tool(dict-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'dict_detail') {

                table.reload('dict-value-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },where:{
                        dictCode:data.dictCode
                    }
                });

                $("#hidDictCode").val(data.dictCode);
                $("#hidIsSys").val(data.isSys);
debugger;
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['1000px','400px']
                    ,title:'数据字典值'
                    ,content: $('#dictValueList')
                });
            } else if (layEvent === 'dict_del') {
                layer.confirm('是否对字典--'+data.dictName+'--进行级联删除？', {
                    btn: ['确认','取消'] //按钮
                }, function(){
                    admin.delete({
                        api: "delDictKey",
                        data: {
                            id:data.id
                        },
                        success: function(res) {
                            layer.msg(res.data);
                            table.reload('dict-table', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        }
                    });
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(dict-table)', function(obj){
            //新增数据字典类型
            if(obj.event === 'createDictKey'){
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['400px','362px']
                    ,title:'新增数据'
                    ,content: $('#dictKey_add')
                });
            }
            //编辑数据字典类型
            if(obj.event === 'editDictKey'){
                var checkStatus = table.checkStatus(obj.config.id);
                var rows = checkStatus.data.length;
                if(rows != 1){
                    layer.msg("必须且只能选择一条数据！");
                    return false;
                }
                var data = checkStatus.data[0];
                var tips="";
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['400px','362px']
                    ,title:'修改数据'
                    ,content: $('#dictKey_edit')
                });
                $("#hidId").val(data.id);
                $("#dictCode_edit").val(data.dictCode);
                $("#dictName_edit").val(data.dictName);
                var select = 'dd[lay-value=' +data.isSys + ']';
                $('#isSys_edit').siblings("div.layui-form-select").find('dl').find(select).click();
                $("#dictDesc_edit").val(data.dictDesc);

            }
        });

    })
</script>